<template>
    <div>
        <!-- 下拉菜单 -->
        <u-dropdown ref="uDropdown" @open="open" @close="close">
            <!-- 选项一 -->
            <u-dropdown-item v-model="list[0].value" :title="list[0].label" :options="optionsData" @change="change">
                <slot name="options1"></slot>
            </u-dropdown-item>
            <!-- 选项二 -->
            <u-dropdown-item v-model="list[1].value" :title="list[1].label">
                <slot name="options2"></slot>
            </u-dropdown-item>
            <!-- 选项三 -->
            <u-dropdown-item v-model="list[2].value" :title="list[2].label" :scroll-view="500">
                <slot name="options3">
                    <div class="content3">
                        <scroll-view scroll-y="true" :style="type == 2 ? 'height:1000rpx' : ''">
                            <div class="list">
                                <div class="item" v-for="(item, index) in customContent" :key="index">
                                    <div class="title">{{ item.title }}</div>
                                    <!-- inputs -->
                                    <div class="inputs" v-if="item.type == 'default'">
                                        <u-input v-model="filter[item.props1]" type="number" input-align="center"
                                            :placeholder='item.placeholder1' placeholder-style="color: #a7a7a7"
                                            :custom-style='customStyle' :clearable='false' />
                                        <div class="split"></div>
                                        <u-input v-model="filter[item.props2]" type="number" input-align="center"
                                            :placeholder='item.placeholder2' placeholder-style="color: #a7a7a7"
                                            :custom-style='customStyle' :clearable='false' />
                                    </div>
                                    <!-- choose -->
                                    <div class="choose" v-if="item.type == 'choose'">
                                        <div class="item" @tap="filter[item.props] = index"
                                            :class="{ 'active': index == filter[item.props] }"
                                            v-for="(chooseItem, index) in item.item" :key="index">{{ chooseItem }}</div>
                                    </div>
                                    <!-- 其他 -->
                                    <div class="other" v-if="item.type == 'other'">
                                        <div class="subtitle" v-for="(others, index) in item.items" :key="index">
                                            <div class="title">{{ others.title }}</div>

                                            <!-- 单选 -->
                                            <div class="singleOption conent" v-if="others.type == 'default'">
                                                <div class="item" @tap="filter[others.props] = index"
                                                    :class="{ 'active': index == filter[others.props] }"
                                                    v-for="(o, index) in others.item" :key="index">{{ o }}</div>
                                            </div>

                                            <!-- 多选 -->
                                            <div class="choice conent" v-if="others.type == 'choice'">
                                                <div class="item" v-for="(o, index) in others.item" :key="index"
                                                    @tap="choice(index)"
                                                    :class="{ 'active': index == filter[others.props] }">{{ o }}
                                                </div>
                                            </div>


                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="bts">
                                <div class="repossess">
                                    <img src="" alt="" class="icon" @tap="repossess">
                                    重置
                                </div>
                                <u-button style="width: 500rpx" @tap="submit" type="primary">确定</u-button>
                            </div>
                        </scroll-view>
                    </div>
                </slot>
            </u-dropdown-item>
        </u-dropdown>
    </div>
</template>
<script>
export default {
    name: 'uViewDropdown',
    props: {
        // 自定义下拉头
        titleList: {
            type: Array,
            defalut: () => []
        },
        // input 样式
        customStyle: {
            type: Object,
            default: () => {
                return {
                    width: '300rpx',
                    height: '80rpx',
                    backgroundColor: '#fbfbfb',
                    borderRadius: '40rpx',
                }
            }
        },
        customContent: {
            type: Array,
            default: () => []
        },
        optionsData: {
            type: Array,
            default: () => {
                return [
                    {
                        label: '最新',
                        value: 1,
                    },
                    {
                        label: '租金正序',
                        value: 2,
                    },
                    {
                        label: '租金倒叙',
                        value: 3,
                    },
                    {
                        label: '面积正序',
                        value: 4,
                    },
                    {
                        label: '面积倒叙',
                        value: 5,
                    },
                ]
            }
        },
        type: {
            type: [Number, String],
            default: 0
        },
    },
    data() {
        return {
            chooseIndex: 0,
            // 默认下拉头
            list: [
                {
                    label: '排序',
                    value: 1

                },
                {
                    label: '区域',
                    value: 2
                },
                {
                    label: '筛选',
                    value: 3
                }
            ],
            //下拉菜单
            filter: {
                house_type: '', //房型
                orientation: "",
                lease_term: "",
                elevator: "",
                renovation: "",
                household_electrical: "",
            },
            // 样式
            listClass: {
                backgroundColor: '#fff'
            },
        }
    },
    methods: {
        submit() {
            console.log(this.filter);
        },
        repossess() {
            this.filter = {
                house_type: '',
                orientation: "",
                lease_term: "",
                elevator: "",
                renovation: "",
                household_electrical: [],
            }
        },
        choice(index) {
            index = index + ''
            // console.log(index);
            let household = []
            household.forEach(el => {
                if (el == index) {
                    console.log(index);
                } else {
                    household.push(index)
                    console.log(household);
                }
            })


        },
        open(index) {
            // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
            // 同时内部会自动给当前展开项进行高亮
            this.$refs.uDropdown.highlight();
        },
        close(index) {
            // 关闭的时候，给当前项加上高亮
            this.$refs.uDropdown.highlight(index);
        },
        change(e) {
            this.$emit('downOptions', e)
        },
        closeDropdown() {
            this.$refs.uDropdown.close();
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .uni-scroll-view {
    position: static;
}

.content3 {
    padding: 30rpx 20rpx 90rpx;
    background-color: #fff;

    .list {
        position: relative;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #f8f8f8;
    }

    .title {
        margin: 20rpx 0;
        font-size: 28rpx;
        font-weight: bolder;
        color: #232323;
    }

    .inputs {
        @include flex($aligin: center);


        .split {
            margin: 0 15rpx;
            background-color: #c0bebe;
            width: 15rpx;
            height: 4rpx;
        }
    }

    .choose,
    .conent {
        @include flex($aligin: center);

        .item {
            margin: 0 10rpx 20rpx 10rpx;
            padding: 10rpx 40rpx;
            background: #f8f8f8;
            border-radius: 28rpx;
            color: #666666;
            font-size: 26rpx;
            border: 1.2rpx solid transparent;
        }

        .active {
            background: rgba(0, 137, 255, 0.08);
            color: #0089FF;
            border: 1.2rpx solid #0089ff;
        }
    }

    .other {
        .subtitle {

            .title {
                margin-bottom: 20rpx;
                color: #999999;
                font-size: 26rpx;
                font-weight: 500;
            }
        }
    }



    .bts {
        border-top: 2rpx solid #f8f8f8;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20rpx;
        background-color: #fff;
        @include flex;

        .repossess {
            img {
                width: 50rpx;
                height: 50rpx;
            }
        }
    }
}
</style>